<template>
  <view class="box">
    <view class="box1">
      <uv-icon name="arrow-left" color="#000" @click="back"></uv-icon>
      <view class="box11">投诉建议</view>
    </view>
    <view class="box2">
      <view class="box21">
        <view class="">反馈内容</view>
        <view class="box22" @click="openPicker">
          {{dizhi}}<uv-icon name="arrow-down" size="20">
          </uv-icon>
          <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
        </view>
      </view>

      <view class="box3">
        <textarea value="" placeholder="请输入反馈内容" />
        <view class="box31">
          <image src="/static/image/xj.png" mode=""></image>
        </view>
      </view>
    </view>

    <button class="btn">提交</button>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const picker = ref(null)
  const columns = ref([
    ['等级A', '等级B', '等级C', '等级D']
  ])
  const dizhi = ref('投诉等级')
  const openPicker = (() => {
    picker.value.open()
  })
  const confirm = ((e) => {
    console.log('confirm', e.value[0]);
    dizhi.value = e.value[0]
  })
  const back = (() => {
    uni.navigateBack({
      delta: 1, // 返回1个，如果是2，返回2个页面
    });
  })
</script>

<style lang="scss">
  @import url("tousujy.scss");
</style>